<template>
  <div class="single-combat-container">
    <el-card class="header-card">
      <template #header>
        <div class="card-header">
          <h2>单兵作战模式</h2>
          <div class="status-indicator">
            <el-tag v-if="trainingStatus === 'idle'" type="info">未开始</el-tag>
            <el-tag v-else-if="trainingStatus === 'preparing'" type="warning">准备中</el-tag>
            <el-tag v-else-if="trainingStatus === 'running'" type="success">训练中</el-tag>
            <el-tag v-else-if="trainingStatus === 'paused'" type="warning">已暂停</el-tag>
            <el-tag v-else-if="trainingStatus === 'completed'" type="success">已完成</el-tag>
          </div>
        </div>
      </template>
      <div class="mode-description">
        <p>单兵作战模式用于培养个人对工控安全攻防技术的理解和实践能力，通过一系列单人训练任务，熟悉各种攻击方法和防御措施。</p>
      </div>
    </el-card>

    <div class="main-content">
      <el-row :gutter="16">
        <el-col :span="8">
          <el-card class="scenario-card">
            <template #header>
              <div class="card-header">
                <h3>训练场景</h3>
              </div>
            </template>
            <div class="scenario-list">
              <el-radio-group v-model="selectedScenario" @change="handleScenarioChange">
                <el-radio-button v-for="item in scenarioList" :key="item.id" :label="item.id">
                  {{ item.name }}
                </el-radio-button>
              </el-radio-group>
              
              <div v-if="currentScenario" class="scenario-details">
                <div class="scenario-info">
                  <h4>{{ currentScenario.name }}</h4>
                  <p>{{ currentScenario.description }}</p>
                </div>
                
                <el-descriptions :column="1" border>
                  <el-descriptions-item label="难度级别">
                    <el-rate
                      v-model="currentScenario.difficulty"
                      disabled
                      show-score
                      text-color="#ff9900"
                    />
                  </el-descriptions-item>
                  <el-descriptions-item label="预计时长">{{ currentScenario.duration }}</el-descriptions-item>
                  <el-descriptions-item label="技能要求">{{ currentScenario.skillRequirements }}</el-descriptions-item>
                </el-descriptions>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="16">
          <el-card v-if="currentScenario" class="training-card">
            <template #header>
              <div class="card-header">
                <h3>训练配置</h3>
                <div class="action-buttons">
                  <el-button 
                    type="primary" 
                    @click="startTraining" 
                    :disabled="trainingStatus === 'running' || trainingStatus === 'paused'"
                  >
                    开始训练
                  </el-button>
                  <el-button 
                    v-if="trainingStatus === 'running'" 
                    type="warning" 
                    @click="pauseTraining"
                  >
                    暂停
                  </el-button>
                  <el-button 
                    v-if="trainingStatus === 'paused'" 
                    type="success" 
                    @click="resumeTraining"
                  >
                    继续
                  </el-button>
                  <el-button 
                    v-if="trainingStatus !== 'idle' && trainingStatus !== 'completed'" 
                    type="danger" 
                    @click="stopTraining"
                  >
                    停止
                  </el-button>
                </div>
              </div>
            </template>
            
            <el-form 
              :model="trainingForm" 
              label-width="120px" 
              :disabled="trainingStatus !== 'idle'"
            >
              <el-form-item label="训练难度">
                <el-select v-model="trainingForm.difficultyLevel">
                  <el-option label="初级" value="beginner" />
                  <el-option label="中级" value="intermediate" />
                  <el-option label="高级" value="advanced" />
                </el-select>
              </el-form-item>
              
              <el-form-item label="训练时长">
                <el-select v-model="trainingForm.duration">
                  <el-option label="30分钟" value="30" />
                  <el-option label="60分钟" value="60" />
                  <el-option label="90分钟" value="90" />
                  <el-option label="120分钟" value="120" />
                </el-select>
              </el-form-item>
              
              <el-form-item label="使用攻击方法">
                <el-select
                  v-model="trainingForm.techniques"
                  multiple
                  collapse-tags
                  collapse-tags-tooltip
                  placeholder="选择训练中使用的攻击方法"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in techniquesOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
              
              <el-form-item label="评分标准">
                <el-checkbox-group v-model="trainingForm.scoringCriteria">
                  <el-checkbox label="completion" border>完成度</el-checkbox>
                  <el-checkbox label="time" border>时间效率</el-checkbox>
                  <el-checkbox label="accuracy" border>准确性</el-checkbox>
                  <el-checkbox label="stealth" border>隐蔽性</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              
              <el-form-item label="训练记录">
                <el-switch
                  v-model="trainingForm.recordTraining"
                  active-text="记录训练过程"
                  inactive-text="不记录"
                />
              </el-form-item>
            </el-form>
            
            <div v-if="trainingStatus === 'running' || trainingStatus === 'paused'" class="training-progress">
              <h4>训练进度</h4>
              <el-progress 
                :percentage="trainingProgress" 
                :status="trainingStatus === 'paused' ? 'warning' : ''"
              />
              
              <div class="current-task">
                <h4>当前任务</h4>
                <div class="task-details">
                  <p><strong>任务名称:</strong> {{ currentTask.name }}</p>
                  <p><strong>任务描述:</strong> {{ currentTask.description }}</p>
                  <p><strong>完成要求:</strong> {{ currentTask.requirements }}</p>
                </div>
              </div>
            </div>
            
            <div v-if="trainingStatus === 'completed'" class="training-result">
              <h4>训练结果</h4>
              <el-result
                icon="success"
                title="训练完成"
                sub-title="恭喜您完成了本次单兵作战训练"
              >
                <template #extra>
                  <el-button type="primary" @click="viewTrainingReport">查看详细报告</el-button>
                  <el-button @click="resetTraining">重新训练</el-button>
                </template>
              </el-result>
              
              <el-card class="score-card">
                <template #header>
                  <div class="card-header">
                    <h3>训练评分</h3>
                  </div>
                </template>
                <div class="score-details">
                  <el-row :gutter="20">
                    <el-col :span="6" v-for="(score, index) in trainingScores" :key="index">
                      <div class="score-item">
                        <h4>{{ score.name }}</h4>
                        <div class="score-value">
                          <span>{{ score.value }}</span>/100
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                  
                  <div class="total-score">
                    <h3>总分</h3>
                    <div class="score-value">
                      <span>{{ totalScore }}</span>/100
                    </div>
                  </div>
                </div>
              </el-card>
            </div>
          </el-card>
          
          <el-empty
            v-else
            description="请选择一个训练场景"
          />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onBeforeUnmount } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';

// 训练状态
const trainingStatus = ref('idle'); // idle, preparing, running, paused, completed
const trainingProgress = ref(0);
const trainingTimer = ref(null);
const selectedScenario = ref(null);

// 训练配置表单
const trainingForm = reactive({
  difficultyLevel: 'intermediate',
  duration: '60',
  techniques: [],
  scoringCriteria: ['completion', 'accuracy'],
  recordTraining: true
});

// 场景列表
const scenarioList = reactive([
  {
    id: 1,
    name: '工控网络渗透基础训练',
    description: '针对工业控制网络的基础渗透测试技能训练，包括网络扫描、服务识别、漏洞发现等基础渗透技能',
    difficulty: 2,
    duration: '约45分钟',
    skillRequirements: '基础网络知识、渗透测试基础',
    tasks: [
      {
        id: 1,
        name: '网络扫描与侦察',
        description: '使用网络扫描工具对目标工控网络进行扫描，发现网络中的设备和服务',
        requirements: '识别至少5个网络设备和3种工控协议服务'
      },
      {
        id: 2,
        name: '漏洞发现与分析',
        description: '对扫描发现的服务进行漏洞扫描，分析潜在的安全风险',
        requirements: '发现并分析至少2个安全漏洞'
      },
      {
        id: 3,
        name: '基础渗透尝试',
        description: '尝试利用发现的漏洞进行基础渗透测试',
        requirements: '成功获取至少一个系统的访问权限'
      }
    ]
  },
  {
    id: 2,
    name: 'SCADA系统攻击模拟',
    description: '针对SCADA系统的攻击模拟训练，学习如何识别和利用SCADA系统中的安全漏洞',
    difficulty: 4,
    duration: '约90分钟',
    skillRequirements: '工控协议知识、中级渗透技能、SCADA系统基础',
    tasks: [
      {
        id: 1,
        name: 'SCADA系统分析',
        description: '分析目标SCADA系统的结构、组件和功能',
        requirements: '识别系统的主要组件和通信流程'
      },
      {
        id: 2,
        name: '协议漏洞利用',
        description: '识别并利用SCADA协议中的安全漏洞',
        requirements: '成功利用至少一个协议漏洞'
      },
      {
        id: 3,
        name: '控制逻辑干扰',
        description: '尝试干扰SCADA系统的控制逻辑',
        requirements: '修改至少一个控制参数或状态'
      },
      {
        id: 4,
        name: '隐蔽操作实施',
        description: '在不触发警报的情况下执行控制操作',
        requirements: '成功执行操作且不触发系统警报'
      }
    ]
  },
  {
    id: 3,
    name: 'PLC设备固件分析',
    description: '针对PLC设备的固件分析训练，学习如何提取、分析和修改PLC固件',
    difficulty: 5,
    duration: '约120分钟',
    skillRequirements: 'PLC编程基础、逆向工程基础、固件分析经验',
    tasks: [
      {
        id: 1,
        name: 'PLC固件提取',
        description: '从目标PLC设备中提取固件',
        requirements: '成功提取完整固件文件'
      },
      {
        id: 2,
        name: '固件结构分析',
        description: '分析固件的文件结构和组成部分',
        requirements: '识别固件的主要组件和功能模块'
      },
      {
        id: 3,
        name: '控制逻辑分析',
        description: '分析固件中的控制逻辑代码',
        requirements: '识别并理解关键控制流程和安全机制'
      },
      {
        id: 4,
        name: '固件修改尝试',
        description: '尝试修改固件中的特定功能',
        requirements: '成功修改并验证至少一项功能变化'
      }
    ]
  }
]);

// 攻击方法选项
const techniquesOptions = ref([
  { id: 1, name: '网络扫描技术', category: '渗透', type: '外部' },
  { id: 2, name: '漏洞利用技术', category: '渗透', type: '外部' },
  { id: 3, name: 'SSH服务爆破', category: '渗透', type: '外部' },
  { id: 4, name: '跨站脚本攻击', category: '渗透', type: '外部' },
  { id: 5, name: 'SQL注入攻击', category: '渗透', type: '外部' },
  { id: 6, name: '工控协议漏洞利用', category: '渗透', type: '外部' },
  { id: 7, name: 'Modbus协议攻击', category: '植入', type: '内部' },
  { id: 8, name: 'DNP3协议攻击', category: '植入', type: '内部' },
  { id: 9, name: 'PLC固件修改', category: '植入', type: '内部' },
  { id: 10, name: 'SCADA系统后门植入', category: '植入', type: '内部' }
]);

// 当前场景
const currentScenario = computed(() => {
  if (!selectedScenario.value) return null;
  return scenarioList.find(item => item.id === selectedScenario.value) || null;
});

// 当前任务
const currentTask = ref({
  name: '',
  description: '',
  requirements: ''
});

// 训练评分
const trainingScores = ref([
  { name: '完成度', value: 0 },
  { name: '时间效率', value: 0 },
  { name: '准确性', value: 0 },
  { name: '隐蔽性', value: 0 }
]);

// 总分
const totalScore = computed(() => {
  return Math.round(trainingScores.value.reduce((sum, item) => sum + item.value, 0) / trainingScores.value.length);
});

// 处理场景变更
const handleScenarioChange = (scenarioId) => {
  if (trainingStatus.value !== 'idle' && trainingStatus.value !== 'completed') {
    ElMessageBox.confirm(
      '切换场景将终止当前训练进度，确定要继续吗？',
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    ).then(() => {
      stopTraining();
      selectedScenario.value = scenarioId;
    }).catch(() => {
      selectedScenario.value = selectedScenario.value;
    });
  }
};

// 开始训练
const startTraining = () => {
  if (!currentScenario.value) {
    ElMessage.warning('请先选择一个训练场景');
    return;
  }
  
  trainingStatus.value = 'preparing';
  
  // 模拟准备过程
  setTimeout(() => {
    trainingStatus.value = 'running';
    trainingProgress.value = 0;
    
    // 设置当前任务为第一个任务
    if (currentScenario.value.tasks && currentScenario.value.tasks.length > 0) {
      currentTask.value = currentScenario.value.tasks[0];
    }
    
    // 模拟训练进度
    trainingTimer.value = setInterval(() => {
      trainingProgress.value += 1;
      
      // 任务切换逻辑
      if (trainingProgress.value === 30) {
        if (currentScenario.value.tasks && currentScenario.value.tasks.length > 1) {
          currentTask.value = currentScenario.value.tasks[1];
        }
        ElMessage.success('第一阶段任务完成');
      } else if (trainingProgress.value === 60) {
        if (currentScenario.value.tasks && currentScenario.value.tasks.length > 2) {
          currentTask.value = currentScenario.value.tasks[2];
        }
        ElMessage.success('第二阶段任务完成');
      } else if (trainingProgress.value === 85) {
        if (currentScenario.value.tasks && currentScenario.value.tasks.length > 3) {
          currentTask.value = currentScenario.value.tasks[3];
        }
        ElMessage.success('第三阶段任务完成');
      }
      
      // 训练完成逻辑
      if (trainingProgress.value >= 100) {
        clearInterval(trainingTimer.value);
        trainingStatus.value = 'completed';
        trainingProgress.value = 100;
        
        // 生成随机评分
        trainingScores.value = trainingScores.value.map(score => {
          return {
            ...score,
            value: Math.floor(Math.random() * 30) + 70 // 70-100之间的随机分数
          };
        });
        
        ElMessage.success('训练已完成');
      }
    }, 300);
  }, 1500);
};

// 暂停训练
const pauseTraining = () => {
  if (trainingStatus.value === 'running') {
    trainingStatus.value = 'paused';
    clearInterval(trainingTimer.value);
    ElMessage.info('训练已暂停');
  }
};

// 继续训练
const resumeTraining = () => {
  if (trainingStatus.value === 'paused') {
    trainingStatus.value = 'running';
    
    // 继续进度更新
    trainingTimer.value = setInterval(() => {
      trainingProgress.value += 1;
      
      // 训练完成逻辑
      if (trainingProgress.value >= 100) {
        clearInterval(trainingTimer.value);
        trainingStatus.value = 'completed';
        trainingProgress.value = 100;
        
        // 生成随机评分
        trainingScores.value = trainingScores.value.map(score => {
          return {
            ...score,
            value: Math.floor(Math.random() * 30) + 70 // 70-100之间的随机分数
          };
        });
        
        ElMessage.success('训练已完成');
      }
    }, 300);
    
    ElMessage.info('训练已继续');
  }
};

// 停止训练
const stopTraining = () => {
  if (trainingStatus.value !== 'idle' && trainingStatus.value !== 'completed') {
    clearInterval(trainingTimer.value);
    trainingStatus.value = 'idle';
    trainingProgress.value = 0;
    ElMessage.warning('训练已停止');
  }
};

// 重置训练
const resetTraining = () => {
  trainingStatus.value = 'idle';
  trainingProgress.value = 0;
  clearInterval(trainingTimer.value);
  
  // 重置评分
  trainingScores.value = trainingScores.value.map(score => {
    return {
      ...score,
      value: 0
    };
  });
};

// 查看训练报告
const viewTrainingReport = () => {
  ElMessageBox.alert(
    '详细训练报告功能正在开发中，敬请期待',
    '功能提示',
    {
      confirmButtonText: '确定'
    }
  );
};

// 组件销毁前清理定时器
onBeforeUnmount(() => {
  if (trainingTimer.value) {
    clearInterval(trainingTimer.value);
  }
});
</script>

<style lang="scss" scoped>
.single-combat-container {
  padding: 16px;
  
  .header-card {
    margin-bottom: 16px;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      h2 {
        margin: 0;
        font-size: 18px;
        color: var(--text-color);
      }
    }
    
    .mode-description {
      margin-top: 10px;
      color: var(--text-color-secondary);
    }
  }
  
  .main-content {
    margin-bottom: 16px;
    
    .scenario-card {
      height: 100%;
      
      .scenario-list {
        display: flex;
        flex-direction: column;
        gap: 16px;
        
        .scenario-details {
          margin-top: 16px;
          
          .scenario-info {
            margin-bottom: 16px;
            
            h4 {
              margin: 0 0 8px;
              font-size: 16px;
              color: var(--text-color);
            }
            
            p {
              color: var(--text-color-secondary);
              margin: 0;
            }
          }
        }
      }
    }
    
    .training-card {
      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        h3 {
          margin: 0;
          font-size: 16px;
          color: var(--text-color);
        }
        
        .action-buttons {
          display: flex;
          gap: 8px;
        }
      }
      
      .training-progress {
        margin-top: 24px;
        
        h4 {
          margin: 16px 0 8px;
          font-size: 14px;
          color: var(--text-color);
        }
        
        .current-task {
          margin-top: 16px;
          padding: 16px;
          background-color: var(--bg-color-secondary);
          border-radius: 4px;
          
          .task-details {
            p {
              margin: 8px 0;
              color: var(--text-color);
            }
          }
        }
      }
      
      .training-result {
        margin-top: 24px;
        
        h4 {
          margin: 16px 0 8px;
          font-size: 14px;
          color: var(--text-color);
        }
        
        .score-card {
          margin-top: 24px;
          
          .score-details {
            .score-item {
              text-align: center;
              padding: 16px;
              
              h4 {
                margin: 0 0 8px;
                font-size: 14px;
                color: var(--text-color);
              }
              
              .score-value {
                font-size: 18px;
                color: var(--text-color);
                
                span {
                  font-size: 24px;
                  font-weight: bold;
                  color: var(--primary-color);
                }
              }
            }
            
            .total-score {
              text-align: center;
              margin-top: 24px;
              padding: 16px;
              border-top: 1px solid var(--border-color);
              
              h3 {
                margin: 0 0 8px;
                font-size: 16px;
                color: var(--text-color);
              }
              
              .score-value {
                font-size: 20px;
                color: var(--text-color);
                
                span {
                  font-size: 36px;
                  font-weight: bold;
                  color: var(--primary-color);
                }
              }
            }
          }
        }
      }
    }
  }
}
</style> 